The completely restyled Draughts Diagram Maker is being launched.
It has a new look with some minor functional improvements. The new layout is better suited for future extensions.

A new feature is added to save your diagram in the cloud by uploading it anonymously to the image sharing site imgur.com
Imgur is the best place to share and enjoy the most awesome images on the Internet.

A new version is released where local storage is used to store upload links and to store board settings.
The next time you visit the diagram maker it restores the board of the last session.

A new feature is implemented to store diagrams (max 10) for reuse at a later moment.

A new feature is implemented to create simple animations of changing positions. You can save the animations as animated gifs.

A new feature is implemented to drag pieces of the board from one square to another.
Existing functionality to add or remove pieces is unchanged.

The Optical Board Reader updates the position of the diagram by scanning an image.

A new tool is launched to draw shapes like lines, rectangles or circles on top of the diagram.

The table with background patterns for dark squares is extended. Seven new light patterns are added.

Link to the uploaded image is:
no link

Stored links to recently uploaded images (max 8)

This feature is disabled. The reason can be that your browser does not support local storage or you disable the use of local storage.

Use your camera to take a photo of a draughts position from books, journals, pdf files or other sources.
Choose the right board in the diagram maker: 8x8, 10x10 or 12x12.
Select the board image (extension jpg/png/gif) with the Browse... button.
Once loaded position the board image by moving, rotating or resizing it.
It is important the board matches the dimensions of the canvas.

Using the mouse to position the board image:
1. Move by dragging with the left mouse button.
2. Increase the size with a left mouse click.
3. Decrease the size with a left mouse click and holding the SHIFT key.
4. Increase/decrease the size with the scroll wheel.

Using key actions to position the board image:
1. Move with arrow-keys (up, down, left, right).
2. Increase/decrease the size with Num lock +/- keys.
3. Rotate with the page up/page down keys (optionally with SHIFT key).

Optical position recognition by a computer is tricky.
Success is not guaranteed. Forgive me if it does not always work.
Always check the position of the diagram after reading it.
As mentioned earlier kings are not recognised. Update these manually.

=============================================
Use the left mouse button to draw shapes.
To start the drawing of a shape, push the left mouse button down.
Then drag the mouse pointer to form the shape.
If you release the left mouse button, the shape is finished.

For a polygon the drawing is a bit different.
Start the drawing of a polygon by a pushing the left mouse button down and up. The first point of the polygon is now defined.
Drag the mouse pointer to locate the next point of the polygon.
Push the mouse button down and up to define the second point. Repeat this process for the other points of the polygon.
The drawing is finished after the mousepointer is near the first point or if 8 sides are drawn.

The shapes are not resized if you resize the board. So before drawing first set the preferred size of the board.

A list of adjustable properties.

1. Piece appearance (40 themes).
2. Color scheme for squares: choice of 600 color combinations.
   Setting a gradient for each color: linear or radial.
   Convert each color to grey values.
   Set the contrast of dark and light square colors.
3. Dimension of the board (8x8, 10x10, 12x12).
4. Size of the board on the screen.
   It defines the resolution of the saved image.
5. The size and style of the frame.
6. Borders of squares (no border, light or dark).
7. Orientation of the board (rotation).
8. Flag to show or hide the numbering of the fields.
9. Format of piece images (SVG or PNG).
   See other section for an explanation.
10. A textline on top or at the bottom of the board (with transparant background).
11. Transparent background texture for dark squares (pattern).

You can change the position in two ways.

1. Put a piece on the board by clicking on a square.
   You can select which kind of piece to put on the board: black man/king, white man/king and a trash for removing pieces.
   After putting a piece, you can drag it from one square to another.
2. By entering a FEN string: a standard encoding to specify a position. The FEN string must meet the standards of PDN 3.0. Notationtype is numeric (alpha-numeric notation is not supported).
   The FEN string can be entered in an input field. The position on the board is automatically adapted after an update of the FEN string.
   Conversely, if you update a position by clicking on the squares, the FEN string in the input field is automatically adapted.

Two buttons facilitates the setup of the initial position and the empty position.

Although not supported by all browsers, two methods are available to make an image of the generated board.

1. Move the mouse cursor on the board and give a right click. A browser menu appears with some option "Save Image As ...".


2. A special button is created which allows you to view or save the board as an image.
   

A commonly used extension for images is jpg but here you had to use the well known extension png.

The size of the board on the screen defines the resolution of the saved image. Choose a large size for a high resolution.
The image resolution varies from low (356x356, 11 kB) to high (996x996, 86 kB).

For sharp piece images we advice to use the format SVG instead of PNG. But not all browsers are capable of creating images for the piece format SVG.

Important!
Unfortunately, at this moment not all browsers support one of these methods. Browsers that currently support one of the methods are:
Firefox, Chrome, Opera, Safari, Android browser, Chrome for Android.
So temporary it seems not possible to make images with Internet Explorer.

Piece images are read from files with two available formats: SVG and PNG. The SVG format is a modern format with the property that images keep its sharpness independent of the size they were displayed.

You can choose which format to use (default PNG).
For sharp piece images we advice to use the format SVG. But not all browsers are capable of creating images for the piece format SVG. You can try it and see if it works. Otherwise keep the piece format PNG.

Local storage aka. Web storage are methods and protocols used for storing data in a web browser. It supports persistent data storage, similar to cookies.
Web storage is being standardized by the World Wide Web Consortium (W3C). It is supported by most modern browsers.

The diagram maker uses web storage to store:
1. Upload links if you upload the board as image to imgur.com
2. Board properties like colors, piece type and position. If you use the diagram maker a next time it restores the last used properties.
3. Diagrams for reuse at a later moment (max 10).
4. Settings of the last generated animation.

If you like you can disable the use of local storage with the switch in the section Preferences.

In the section "Create Animation" you can create an animated GIF or PNG of changing positions.
Each animation is defined by three main properties:
- the initial position.
- the delay of a frame (milliseconds).
- the transition of one frame to the other.

To create an animation, follow the next steps.
1. Choose an initial position.
2. Press the button Start to open the recording phase. During the recording phase, all mouse actions at the board are stored as transitions of the position.
3. Change the current position with your mouse by clicking and dragging pieces. A counter is displayed to show the number of stored mouse actions.
4. Press the GO button to generate an animation. Wait a moment before the animation is created and displayed.

At each moment during the recording phase you can generate an animation.
Once the recording phase is stopped by pressing the Stop button, no new mouse actions can be added.

The delay of one frame of the animation can be set by a sliderbar. During the recording phase the delay of transitions can be changed.

A title is displayed at the start of the animation. You can change the title in a text field.
A new line is created with the separator ++.
If you let the text field empty, no title is displayed.

Use the checkbox to select the extension of the animation file: GIF or PNG.
GIF is an old format and is widely supported.
Sometimes PNG animations are prefered over GIF animations.
By a special design the PNG animations has a much smaller filesize.

The Optical Board Reader (OBR) enables you to extract a position from an image (photo) and update the position of the diagram.
If you need a position from an image you do not have to sit and type the position manually. Just scan the position and then use our OBR tool to convert it into an editable diagram.
Please note that the output position might require a further sanity check, since there are a lot of complications that can arise during the recognition process. Still, checking the position will be a lot faster and easier than having to type it all in, one piece at a time.
The application recognizes the position of black and white pieces but does not distinguish pieces and kings. So you must update the position of kings manually.
To increase success avoid shading of squares, patterns or gradients. The application works also for low resolution images.
Recognition is more successfull if the board image matches the dimensions of the canvas. To accomplish this you can resize, rotate and move the image.
For more usage tips see the section of the OBR tool.

To make something clear, you can illustrate your diagram with shapes. The shapes can be drawn with the mouse by clicking and dragging. Use the left mouse button to draw shapes. The shapes are put on top of the diagram.
Choose one of the basic forms to draw: line, rectangle, ellipse, polygon or free form.
The shapes are not resized if you resize the board. So before drawing, first set the preferred size of the board.
The shapes are stored in local storage. If the diagram maker is started, stored shapes are reloaded and drawn.
For more usage tips see the section of the drawing tool.

• 20 march 2017: release 2017.03.1
  New completely restyled version.
  
• 10 april 2017: release 2017.03.2
  New piece theme B45 added.
  
• 30 april 2017: release 2017.04.1
  New piece themes: B46, B47, B48, B49.
  Upgraded piece themes: B06, B15, B22, B35.
  New toggle switch for grey colors.
  New toggle switch for color gradient of dark squares.
  
• 14 may 2017: release 2017.05.1
  New piece themes: B50, B51.
  New square border style "outset" added.
  Added a feature to upload diagrams to the site imgur.com
• 20 may 2017: release 2017.05.2
  Feature to display some user statistics.
  Storing links to imgur.com of uploaded images.
• 11 jun 2017: release 2017.06.1
  Local storage implemented for storing board properties.
• 13 jun 2017: release 2017.06.2
  Coloring of dark squares extended with radial gradient.
• 27 jun 2017: release 2017.06.3
  Demo section: removed.
  New feature to store max 10 diagrams on local storage.
  New piece icons B52, B53, B55, B56, B57, B58.
• 19 jul 2017: release 2017.07.1
  New feature to create animated GIFs.
• 22 jul 2017: release 2017.07.2
  You can now add titles to the animation.
• 18 aug 2017: release 2017.08.1
  New button in the Save board as image section: open board as image in a separate window.
  Added support for PNG animations (APNG).
• 07 sep 2017: release 2017.09.1
  Added support for dragging pieces.
• 17 sep 2017: release 2017.09.2
  Rebuild of animation support. Simplified with mouse actions (dragging).
• 01 oct 2017: release 2017.10.1
  New: patterns. Select transparent background textures for dark squares.
• 9 oct 2017: release 2017.10.2
  New: more color combinations by setting square color contrast.
  Adding four new patterns for dark squares.
• 27 oct 2017: release 2017.10.3
  Revision of selection box for square border. Added two new options.
• 1 mar 2018: release 2018.03.1
  Tool to update the position of a diagram with an Optical Board Reader.
• 10 march 2018: release 2018.03.1
  A new tool to draw shapes at the top of a diagram.
  
• 20 sep 2018: release 2018.09.1
  Multiline input of fen position.
  Simplified switch buttons for better compatibility.
  
• 16 dec 2018: release 2018.12.1
  New piece theme B65.
  
• 16 jan 2020: release 2020.01.1
  PHP counter scripts removed.
  Revised upload canvas to IMGUR with PHP script.
  

Draughts Diagram Maker is a personal project, setup and maintained as a leisure activity.
I hope it will be useful and you enjoy it.
The work is copyrighted. Please ask for permission to use parts of my work.

The diagram maker should work well for modern browsers. Maybe it does not work well always because browsers work differently. Browsers are constantly evolving so you can expect if it does not work well now, it works well in the future.

The diagram program uses the programming language Javascript. Your browser must be enabled to use Javascript.

Comments or questions?
Please send a mail to: Arthur Kalverboer

The creation of animated gif is supported by the jsgif library of Kevin Kwok. Copyright (c) 2010-2014 Kevin Kwok. Email: antimatter15@gmail.com

Other javascript copyrights:
- color.js: copyright (c) 2008-2013, Andrew Brehaut, Tim Baumann, Matt Wilson, Simon Heimler, Michel Vielmetter.
- blob detection by Andrew Ippoliti Blog
- floodFill: copyright(c) 2016 Max Irwin (MIT license).
- k-means Image Color Quantizer: copyright (c) 2017 Daniel Steinberg.

Web hosting by the Dutch association Open Domein.

You can download a generated diagram as image under the condition that it belongs to the public domain, anyone can freely make copies of it, distribute it, use it for commercial purposes or sell it to others.

The term public domain refers to creative materials that are not protected by intellectual property laws such as copyright, trademark, or patent laws. The public owns these works, not an individual author or artist. Anyone can use a public domain work without obtaining permission, but no one can ever own it.